import React from "react";
import { FloatingBubble, Toast } from "antd-mobile";
import { CloseOutline } from "antd-mobile-icons";
import "./index.scss";
import { usePlayerStore } from "@/store/player";
export default () => {
  const { isPlay, togglePlay, popData, toggleBubbleShow, togglePopShow } =
    usePlayerStore((state) => state);
  return (
    <div
      style={{
        textAlign: "center",
        padding: "50vh 32px 0",
      }}
    >
      <FloatingBubble
        className="bubble"
        style={{
          "--initial-position-bottom": "24px",
          "--initial-position-right": "24px",
          "--edge-distance": "24px",
        }}
      >
        <div className={`bubble-cont ${isPlay ? "play" : ""}`}>
          <i
            className="iconfont zanting1_bg"
            onClick={() => {
              togglePlay(false);
            }}
          ></i>
          <i
            className="iconfont bofang_bg"
            onClick={() => {
              togglePlay(true);
            }}
          ></i>
          <img
            className={`poster ${isPlay ? "" : "pause"}`}
            src={popData?.img}
            onClick={() => {
              togglePopShow(true);
            }}
          />
          <CloseOutline
            fontSize={18}
            onClick={() => {
              toggleBubbleShow(false);
              togglePlay(false);
            }}
          />
        </div>
      </FloatingBubble>
    </div>
  );
};
